﻿$(function () {
    /*
        userType:用户类型，-1为未登录
        guide_login：未登录状态cookie记录首次访问
        guide_page：页面是否有引导需要，默认不需要，在需要的页面设置即可，类型string
    */
    

    if (userType == -1 && window.localStorage.guide_login == undefined && guide_page) {
        guideHelp();
    } else if (is_Show && isFirstLogin !== "0" && userType != -1 && guide_page) {
        guideHelp();
        window.localStorage.setItem("first_status" + USER_TYPE, "0");
        
    }
    
});
var defaultShow = true;
var back_guide_div;//黑色蒙板
if (typeof USER_TYPE !== 'undefined') {
    isFirstLogin = window.localStorage.getItem('first_status' + USER_TYPE);//用户是不是首次登录，如果是的为true
}
//var isFirstLogin = window.localStorage.getItem('' + USER_ID);//用户是不是首次登录，如果是的为true
var cur_step = 0;//当前第几步，默认第一步
var guide_list = [];//不同页面对应的引导模块数组
var show_block;//当前显示的块
var block;//引导块
//获取不同页面的引导数组数据
function getGuideList() {
    switch (guide_page) {
        case 'home':
            window.localStorage.setItem('' + USER_ID, '');
            USER_TYPE = USER_TYPE.toString();
            switch (USER_TYPE) {
                case '0':
                    guide_list = [
                        { title: 'home0', positionClass: 'pos_home0', arrow_class: 'top_Left', text: '您现在是模拟用户（1个月后到期），可在此开设真实交易账户，可以开设不同经纪商账户和多个账户。' },
                        { title: 'home1', positionClass: 'pos_home1', arrow_class: 'top_Left', text: '免费赠您$10000模拟资金（有效期1个月），<br>您可深度体验Followtrade精准跟随和自主在线交易。' },
                        { title: 'home2', positionClass: 'pos_home2', arrow_class: 'top_Left', text: '您可在此查看所有产品的行情走势，并在线交易。' },
                        { title: 'home3', positionClass: 'pos_home3', arrow_class: 'left_Top', text: '这是您的投资组合，<br>可快速查看自主交易和跟随收益综合情况。' },
                        { title: 'home4', positionClass: 'pos_home4', arrow_class: 'bottom_Left', text: '在这里，您可直接与所有ME友交流互动，<br>交易不再孤单。' },
                        { title: 'home5', positionClass: 'pos_home5', arrow_class: 'top_Right', text: '您可在此管理订单及跟随，查看交易数据和资金状况。' },
                        { title: 'home6', positionClass: 'pos_home6', arrow_class: 'top_Right', text: '您可在此查看社区及关注动态，管理话题和微博。' },
                        { title: 'home7', positionClass: 'pos_home7', arrow_class: 'top_Right', text: '您可在此完善个人资料，查看账户申请进度。' }
                    ];
                    break;
                case '1':
                    guide_list = [
                        { title: 'home0', positionClass: 'pos_home0', arrow_class: 'top_Left', text: '交易员，您好！<br>您还可开设多个经纪商账户，并切换账户进行交易。' },
                        { title: 'home3', positionClass: 'pos_home3', arrow_class: 'left_Top', text: '在这里，您可以快速查看所有跟随者的情况。' },
                        { title: 'home5', positionClass: 'pos_home5', arrow_class: 'top_Right', text: '您可在此管理订单，查看资金状况、跟随者详情和服务费。' }
                    ];
                    break;
                case '2':
                    guide_list = [
                        { title: 'home0', positionClass: 'pos_home0', arrow_class: 'top_Left', text: '跟随者，您好！<br>您还可开设多个经纪商账户，并切换账户进行交易。' },
                        { title: 'home3', positionClass: 'pos_home3', arrow_class: 'left_Top', text: '这是您的投资组合，<br>可快速查看自主交易和跟随收益综合情况。' },
                        { title: 'home5', positionClass: 'pos_home5', arrow_class: 'top_Right', text: '您可在此管理订单，查看资金状况、跟随者详情和服务费。' }
                    ];
                    
                    break;
            }
            break;
        case 'login_page':
            window.localStorage.guide_login = true;
            switch (userType) {
                case -1:
                    guide_list = [
                        { title: 'login0', positionClass: 'pos_login0', arrow_class: 'top_Left', text: '欢迎来到Followme!<br/>请登录或注册，开始您的外汇社区交易。' },
                        { title: 'login1', positionClass: 'pos_login1', arrow_class: 'top_Right', text: '当您遇到问题时，可随时打开“帮助中心”看一看。' }
                    ];
                    break;
                default:
                    defaultShow = false;
                    break;
            }
            break;
        default:
            defaultShow = false;
            break;
    }
}

//创建黑色蒙板
function buildBackDiv() {
    if (back_guide_div) return;
    back_guide_div = $("<div style='width: 100%; height: 100%; position: fixed; z-index: 8888; opacity: 0.7; display: block; background-color: rgb(0, 0, 0);'></div>");
    $("body").prepend(back_guide_div);
}
//删除黑色蒙板
function removeBackDiv() {
    if (!back_guide_div) return;
    back_guide_div.remove();
    back_guide_div = null;
}

//创建引导块
function buildHelpDiv(info) {
    if (block) block.remove();
    block = $('<div class="guidance_wrap ' + info.positionClass + ' guidance-z"></div>');
    var arrow_span = $('<span class="' + info.arrow_class + '"></span>');
    var block_text = $('<div class="guidance_box"><a href="javascript:;" class="guidance_closebtn"  onclick="closeGuide()"></a><div class="guidance_wide xt"><span class="color-y size24 current_step">' + (cur_step + 1) + '</span><span class="color7 total_step size16">/' + guide_list.length + '</span></div><div class="guidance_text">' + info.text + '</div></div>');

    var block_button;
    if (cur_step == 0) {
        block_button = $('<div class="btnbox"><a href="javascript:;" class="btn_right"  onclick="goNext()">下一步</a></div>');
        if (guide_list.length == 1) {
            block_button = $('<div class="btnbox"><a href="javascript:;" class="btn_right"  onclick="closeGuide()">知道了</a></div>');
        }
    } else if (cur_step == guide_list.length - 1) {
        block_button = $('<div class="btnbox"><a href="javascript:;" class="btn_left" onclick="goForward()">上一步</a><a href="javascript:;" class="btn_right"  onclick="closeGuide()">知道了</a></div>');
    } else {
        block_button = $('<div class="btnbox"><a href="javascript:;" class="btn_left" onclick="goForward()">上一步</a><a href="javascript:;"  class="btn_right" onclick="goNext()">下一步</a></div>');
    }
    block_text.append(block_button);
    block.append(arrow_span).append(block_text);
}
//打开引导
function openGuide() {
    if (show_block) show_block.removeClass('guidance-z');
    var info = guide_list[cur_step];
    //根据数据寻找模块
    
    show_block = $("div[isGuide='" + info.title + "']");
    var divScropTop = show_block.offset().top;
    var show_block_height = show_block.height();
    show_block.addClass('guidance-z');
    //特殊处理样式
    if (info.title == 'login1') {
        $(".common_header").css('z-index', '9999');
    } else {
        $(".common_header").css('z-index', '1000');
    }
    if (info.title == 'login0') {
        $(".login").css('z-index', '10000');
    } else {
        $(".login").css('z-index', '2');
    }
    $('body,html').animate({ scrollTop: divScropTop > 200 ? divScropTop : 0 }, 300);

    buildHelpDiv(info);
    block.show();

    show_block.append(block).append('<div style="clear:both;"></div>');
    $('.guidance_wrap').mouseover(function (e) {
        e.stopPropagation();
    })
}

//上一步
function goForward() {
    cur_step--;
    openGuide();
}

//下一步
function goNext() {
    cur_step++;
    openGuide();
}

//关闭
function closeGuide() {
    removeBackDiv();
    if (show_block) show_block.removeClass('guidance-z');
    if (block) {
        block.remove();
        $(".common_header").css('z-index', '1000');
        $(".login").css('z-index', '2');
    }
    $('body,html').animate({ scrollTop: 0 }, 300);
    $("#i-f-nav-ul").css('z-index', '777');
    cur_step = 0;
}


//引导
function guideHelp() {
    getGuideList();
    if (defaultShow) {
        buildBackDiv();
        openGuide();
    }
}
